<template>
  <!--贡献参与度-->
  <div class="teach">
    <p class="align">贡献参与度</p>
    <div class="tea1">
      <p>(1) 课时完整性</p>
      <div class="red">
        <form class="buy">
          完整参见培训：
          <input type="radio" v-model="rule" name="gan" id="1" class="ra"  /><label for="y"
            >是</label
          >
          <input type="radio" v-model="rule" name="gan" id="2" class="ra" /><label for="w"
            >否</label
          >
        </form>
        <p class="buy">请假次数：<input type="text" v-model="leave" />次</p>
        <p class="buy">无故旷课：<input type="text" v-model="reason" />次</p>
      </div>
      <p>(2) 培训参与情况</p>
      <div class="red">
        <p class="buy">培训参与度：<input type="text" v-model="training" />%</p>
        <p class="buy">培训分享次数：<input type="text" v-model="sharing" />次</p>
      </div>
      <p>(3) 教研参与情况</p>
      <div class="red">
        <p class="buy">参加教研：<input type="text" v-model="teaching" />次</p>
        <p class="buy">完成教研任务：<input type="text" v-model="tasks" />次</p>
        <p class="buy">教研分享：<input type="text" v-model="research" />次</p>
      </div>
      <p>(4) 教学反映情况</p>
      <div class="red">
        <form class="buy">
          课程PPT是否完整提交：
          <input type="radio" v-model="test" name="gan1" value="1" id="yes1" class="ra" /><label
            for="y"
            >是</label
          >
          <input type="radio" v-model="test" name="gan1" value="2" id="no1" class="ra" /><label for="w"
            >否</label
          >
        </form>
        <form class="buy">
          指导记录是否完整提交：
          <input type="radio" v-model="testing" name="gan2" id="yes2" class="ra" value="1" /><label
            for="y"
            >是</label
          >
          <input type="radio" v-model="testing" name="gan2" id="no2" class="ra" value="2"/><label for="w"
            >否</label
          >
        </form>
      </div>
      <p>(5) 教学产品研发</p>
      <div class="red">
        <form class="buy">
          研发一套新产品，并通过质检：
          <input type="radio" v-model="submiss" name="gan3" id="yes3" class="ra" value="1"/><label
            for="y"
            >是</label
          >
          <input type="radio" v-model="submiss" name="gan3" id="no3" class="ra" value="2"/><label for="w"
            >否</label
          >
        </form>
        <form class="buy">
          迭代一套现有产品 并通过质检：
          <input type="radio" v-model="record" name="gan4" id="yes4" class="ra" value="1"/><label
            for="y"
            >是</label
          >
          <input type="radio" v-model="record" name="gan4" id="no4" class="ra" value="2"/><label for="w"
            >否</label
          >
        </form>
      </div>
      <div class="jifen">
        <button @click="btn">提交修改</button>
      </div>
    </div>
    <section class="wmassageMask" v-show="writeMessageShow">
      <div class="tk">
        <p>成功</p>
        <p class="border"></p>
        <button @click="qd">确定</button>
      </div>
    </section>
  </div>
</template>
<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      leave: "",
      reason: "",
      training: "",
      sharing: "",
      teaching: "",
      tasks: "",
      research: "",
      rule:'',
      submiss:'',
      test:'',
      testing:'',
      record:'',
      writeMessageShow: false
    };
  },
  methods: {
    btn() {
      console.log(11);
      let that = this;
      axios
        .post("/system/participate", {
          teaid:localStorage.getItem("ids"),
          leave: that.leave,
          reason: that.reason,
          training: that.training,
          sharing: that.sharing,
          teaching: that.teaching,
          tasks: that.tasks,
          research: that.research,
          rule:that.rule,
          submiss:that.submiss,
          test:that.test,
          testing:that.testing,
          record:that.record,
        })
        .then(function (res) {
          console.log(res);
          that.writeMessageShow = true
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    qd(){
      this.writeMessageShow = !this.writeMessageShow
    }
  },
  created() {
    let that = this;
    axios
      .get(
        "/system/parti",
         {id:localStorage.getItem("ids")}
      )
      .then(function (res) {
        console.log(res.data.data);
        that.leave = res.data.data.leave;
        that.reason = res.data.data.reason;
        that.training = res.data.data.training;
        that.sharing = res.data.data.sharing;
        that.teaching = res.data.data.teaching;
        that.tasks = res.data.data.tasks;
        that.research = res.data.data.research;
        that.rule=res.data.data.rule;
        that.submiss=res.data.data.submiss;
        that.testing=res.data.data.testing;
        that.test=res.data.data.test;
        that.record=res.data.data.record;
      })
      .catch(function (err) {
        console.log(err);
      });
  },
};
</script>
<style scoped>
.teach{position: relative;}
.wmassageMask{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0,0,0,.3);z-index: 101;}
.tk{width: 80%;margin: 10% 0;background-color: #ccc;position: absolute;top:12rem;left:10%;background-color: #fff;border-radius: 10px;}
.tk button{color: #278ED4;width: 100%;padding: 1rem;border: 0;background-color: #fff;border-radius: 10px;margin-bottom:0;}
.tk p{width: 100%;padding: 2rem 0;text-align: center;}
.tk p.border{border-top:1px solid #ccc;padding:0;width:100%;height: 1px;}
.align {
  width: 100%;
  text-align: center;
  color: #f00;
  font-size: 1rem;
  line-height: 2rem;
}
.tea1 {
  width: 92%;
  margin: 0 auto;
  font-size: 0.9rem;
}
.red {
  width: 95%;
  margin: 0 auto;
  font-size: 0.9rem;
}
.buy {
  display: flex;
  justify-content: flex-start;
  line-height: 1.9rem;
}
button {
  width: 60%;
  line-height: 2rem;
  border-radius: 15px;
  background: #d62c32;
  border: 1px solid #d62c32;
  color: #f7ecec;
  margin-bottom: 1rem;
  outline: none;
}
.jifen {
  width: 80%;
  margin: 10px auto;
  display: flex;
  justify-content: space-evenly;
}
.jifen p {
  margin-top: 15px;
  color: #a4a4a4;
  font-size: 12px;
}
input {
  margin: 8px 4px;
  width: 40px;
  border: 0;
  border-bottom: 1px solid #000;
  outline: none;
}
.ra {
  margin: 10px 4px;
  width: 15px;
}
.r {
  margin: 5px 0;
}
</style>
